<template>
  <div class="app-container">
    <el-card class="box-card" >
      <div slot="header" class="clearfix">
        <span class="el-icon-document">事项详情</span>
      </div>
      <el-row>
        <el-descriptions :title="app.appName" :column="1">
          <el-descriptions-item label="开始时间">{{app.startTime}}</el-descriptions-item>
          <el-descriptions-item label="结束时间">{{app.endTime}}</el-descriptions-item>
          <el-descriptions-item label="事项描述">
            <div v-html="app.description"></div>
          </el-descriptions-item>
          <el-descriptions-item v-if="app.attach" label="附件">
            <file-upload v-model="app.attach" :isOnlyShow="true"/>
          </el-descriptions-item>
      </el-descriptions>
      </el-row>
    </el-card>
    <el-card class="box-card" >
      <div slot="header" class="clearfix">
        <span class="el-icon-document">表单信息</span>
      </div>
      <el-row>
        <v-form-render :form-json="formJson" :form-data="formData" :option-data="optionData" ref="vFormRef"></v-form-render>
        <el-col :offset="6">
          <el-button type="primary" style="margin:auto" @click="submitForm" v-hasPermi="['flowable:procInst:start']">发起事项</el-button>
          <el-button type="primary" style="margin-left:20px" @click="saveDraft" v-hasPermi="['flowable:draft:add']">保存草稿</el-button>
        </el-col>
      </el-row>
    </el-card>
    <el-card class="box-card" >
      <div slot="header" class="clearfix">
        <span class="el-icon-document">流程图</span>
      </div>
      <div v-if="xmlData" >
        <flow-view :xmlData.sync="xmlData" :taskList.sync="taskList"></flow-view>
      </div>
    </el-card>
  </div>
</template>

<script>
import { getApp,getAppVersion,getFormVersion,getBpmnConfig,getFormDataByInstId } from "@/api/flowable/front";
import { addDraft, getDraft } from "@/api/flowable/draft";
import { start } from "@/api/flowable/procInst";
import FlowView from "../bpmn/FlowView"
import { setFieldsAuth, setFormAuth } from "@/utils/index";

export default {
  name: "Start",
  components:{FlowView},
  data() {
    return {
      //流程id
      appId: this.$route.query.appId,
      draftId: this.$route.query.draftId,
      procInstId: this.$route.query.procInstId,
      app:{},
      //xml
      xmlData: '',
      taskList: {},
      appVersionId: 0,
      //表单
      formJson:{},
      formData:{},
      optionData: {},
    };
  },
  created() {
    this.appInfo();
  },
  methods: {
    appInfo(){
      getApp(this.appId).then(res=>{
        this.app = res.data;
        this.appVersionId = res.data.useVersion;
        this.getAppVersion()
      })
    },
    async getAppVersion(){
      let config = await getBpmnConfig(this.appVersionId);
      let appV = await getAppVersion(this.appVersionId);
      // console.log(config)
      this.xmlData = appV.data.bpmnXml;
      let formV = await getFormVersion(appV.data.formVersionId);

      let authMap = {};

      if(config.data && config.data.nodeConfig) {
        let nodeConfig = JSON.parse(config.data.nodeConfig);
        for (const key in nodeConfig) {
          if (key.indexOf('Event') > -1) { //发起节点
            authMap = nodeConfig[key];
            break;
          }
        }
      }

      let formContent = JSON.parse(formV.data.formContent);
      setFieldsAuth(formContent.widgetList, authMap);
      this.$refs.vFormRef.setFormJson(formContent);

      //加载完之后设置属性有问题，弃用
      // this.$nextTick(()=>{
      //   setFormAuth(this.$refs.vFormRef, authMap);
      // })

      if (this.draftId){
        this.getDraft();
      } else if (this.procInstId){
        this.getDataByProcInstId();
      }

    },
    /** 申请流程表单数据提交 */
    submitForm() {
      this.$refs.vFormRef.getFormData().then(formData => {
        this.$modal.confirm("您确认发起该流程？").then(() => {
          // 启动流程并将表单数据加入流程变量
          start(this.appVersionId, JSON.stringify(formData)).then(res => {
            this.$modal.msgSuccess(res.msg);
            this.$router.push("/inst/myinst")
            // this.goBack();
          })
        })
      }).catch(error => {
        // Form Validation failed
        this.$message.error(error)
      })
    },
    // 保存&修改草稿
    saveDraft(){
      let data = {
        appId:this.appId,
        submitData:JSON.stringify(this.$refs.vFormRef.getFormData(false))
      }
      this.$modal.confirm("您确认保存草稿？").then(() => {
        this.loading = true;
        // 启动流程并将表单数据加入流程变量
        addDraft(data).then((res) => {
          this.loading = false;
          this.$modal.msgSuccess(res.msg);
        });
      });
    },
    /** 返回页面 */
    goBack() {
      // 关闭当前标签页并返回上个页面
      this.$store.dispatch("tagsView/delView", this.$route);
      this.$router.go(-1)
    },
    getDraft(){
      this.loading = true;
      getDraft(this.draftId).then(res => {
        if(res.code === 200){
          this.loading = false;
          // this.formData = JSON.parse(res.data.submitData)
          this.$nextTick(() => {
            this.$refs.vFormRef.setFormData(JSON.parse(res.data.submitData))
          })
        }
      })
    },
    getDataByProcInstId(){
      this.loading = true;
      getFormDataByInstId(this.procInstId).then(res => {
        if(res.code === 200){
          this.loading = false;
          // this.formData = JSON.parse(res.data.submitData)
          this.$nextTick(() => {
            this.$refs.vFormRef.setFormData(JSON.parse(res.data.submitData))
          })
        }
      })
    }
  }
};
</script>

<style scoped>
.box-card{
margin-bottom: 10px;
width:87vw
}
</style>
